<!DOCTYPE html>
<html>
    <head>
        <title>select file</title>
    </head>
    <style>
        li{
            cursor: pointer;
        }
        .selected{
            background-color: red;
        }
    </style>
    <body>
        <ul id="ul">
            <li>现代js教程</li>
            <li>freeCodeCamp</li>
            <li>MDN</li>
            <li>vue官方文档</li>
        </ul>

        <script>
            //添加事件处理函数
            //事件处理函数的参数为 event
            ul.onclick = function(event){

                if(event.ctrlKey || event.metaKey){
                    console.log("rrr");
                    toggleSelect(event.target);
                }
                else{
                   singleSelect(event.target);
                }
            }

            ul.onmousedown = function() {
                return false;
            };

            function toggleSelect(li){
                console.log("in tog");
                li.classList.toggle('selected');
            }

            function singleSelect(li){
                let selected = ul.querySelectorAll(".selected");
                for(let i of selected){
                    i.classList.remove('selected');
                }
                li.classList.add('selected');
            }

            const lis = document.querySelectorAll("ul li");
      
            const liArr = Array.from(lis);
            //添加一个变量保存最后一个点中的元素

            // for(let i of liArr){
            //     console.log(i);
            //     i.classList.add('selected');
            // }
            
            let lastChecked;
            //设置一个元素保存是选中状态还是其他
            let onOff = false;

            function handleCheck(event){
                //初始化 lastCheck为当前元素
                if(!lastChecked) lastChecked = this;
                //判断是需要添加样式还是删除样式
                if(!onOff && !this.classList.contains('select')){
                    onOff = true;
                }
                else{
                    onOff = false;
                } 
                console.log("onoff", onOff);
                let start = liArr.indexOf(this);
                let end = liArr.indexOf(lastChecked);
                console.log(start, end);
                if(event.shiftKey){
                    if(onOff){
                        liArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                        .forEach(ele => ele.classList.add('selected'));
                        console.log("in add");
                    }
                    else{
                        liArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                        .forEach(ele => ele.classList.remove('selected'));

                        liArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                        .forEach(ele => console.log(ele));
                        console.log("in remove");
                    }
                    console.log("in shift");
                }
                //更新lastCheck
                lastChecked = this;
            }
            lis.forEach(ele => ele.addEventListener('click', handleCheck));

        </script>
    </body>
</html>